import styled from "@emotion/styled"
import { ButtonGroup } from "./components/ButtonGroup"
import { useNavigate } from "react-router-dom"
import { useModalSlideUp } from "@/features/useModal"
import { useAuth } from "@/features/useAuth"
import { Repository } from "@/atoms/api_repositories"
import { useAtom } from "jotai"
import { SetVerifyAtom, verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { resolveAssetImage } from "@/utils/common"
import { ImageComponent } from "@/components/base/Image"

const EmailTipsImage = resolveAssetImage("pages/AccountPage/models/email_tip.webp")
const PhoneTipImage = resolveAssetImage("pages/AccountPage/models/phone_tip.webp")

interface ChangeInfoProps {
    type: "phone" | "email"
    value: string
}

const ChangeInfo = ({ type, value }: ChangeInfoProps) => {
    console.log(type, "userInfo")
    const navigate = useNavigate()
    const { data: userInfo } = Repository.useUserInfo()
    // const setVerifyData = useSetAtom(verifyAtom)
    const [verifyData] = useAtom(verifyAtom)
    const [, setVerifyData] = useAtom(SetVerifyAtom)
    const isPhoneType = type === "phone"
    const { close: closeModal } = useModalSlideUp("account-page")
    const { sendVerifyCode } = useAuth()

    const sendCode = async () => {
        if (!userInfo?.phoneNumber?.number) return
        const res = await sendVerifyCode(userInfo?.phoneNumber?.number)
        if (res.success && res.data?.id) {
            setVerifyData({
                ...verifyData,
                otpId: res.data?.id,
            })
            return true
        } else {
            return false
        }
    }

    const handleConfirm = async () => {
        const verifyConfig = {
            ...verifyData,
            type: "edit" as const,
            field: isPhoneType ? ("phone" as const) : ("email" as const),
        }

        setVerifyData(verifyConfig)
        closeModal()
        navigate("/s-account/verifytype")
    }

    const getTipsText = () => {
        const type = isPhoneType ? "phone number" : "email"
        return `This ${type} is linked to your account and is only visible to you. If you change it, it may still be retained for account recovery purposes.`
    }

    return (
        <Root>
            <LightImage />
            <TipImage src={isPhoneType ? PhoneTipImage : EmailTipsImage}></TipImage>
            <TitleBox>
                <Title>{isPhoneType ? "Your phone number:" : "Your email address:"}</Title>
                <Title>{value}</Title>
            </TitleBox>
            <Tips>{getTipsText()}</Tips>
            <ButtonGroup
                onCancel={closeModal}
                onConfirm={handleConfirm}
                cancelText="Close"
                confirmText="Change"
            ></ButtonGroup>
        </Root>
    )
}

export default ChangeInfo

const Root = styled.div`
    width: 100%;
    height: 388rem;
    display: flex;
    flex-direction: column;
    padding: 24rem;
    align-items: center;
    position: relative;
`

const LightImage = styled(ImageComponent("pages/AccountPage/models/light.webp"))`
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    > img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
`

const TipImage = styled.img`
    width: 160rem;
    height: 120rem;
    z-index: 1;
`
const TitleBox = styled.div`
    margin-top: 16rem;
    z-index: 1;
`
const Title = styled.div`
    width: 100%;
    text-align: center;
    color: #131416;
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 18rem;
    line-height: 28rem;
    z-index: 1;
`

const Tips = styled.div`
    margin-top: 12rem;
    line-height: 20rem;
    color: #40444f;
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 14rem;
    text-align: center;
    margin-bottom: 16rem;
    z-index: 1;
`
